<template>
  <!-- header -->
  <div class="homewrap">
    <van-nav-bar
      style="margin-bottom: -1px"
      title="米兰书画"
      left-text="返回"
      :border="false"
      left-arrow
    />
    <!-- 轮播 -->
    <swiper :swipe_items="swipe_items" />
    <!-- 菜单项 -->
    <navs class1="nav" />
    <!-- 新鲜事 -->
    <blo title="新鲜事" clr="#e7a21d">
      <div class="xxs">
        <div class="lf">
          <p class="tle van-ellipsis">{{ xxs.tle }}</p>
          <!-- 样式是vant内置样式 最多展示三行，超出省略 -->
          <p class="desc van-multi-ellipsis--l3">{{ xxs.desc }}</p>
        </div>
        <div class="rgt">
          <img src="../assets/imgs/c.jpg" alt="" />
        </div>
      </div>
    </blo>
    <!-- 宝贝专栏 -->
    <blo title="宝贝专栏" clr="#754f9c">
      <div class="bbzl">
        <p class="tle">{{ bbzl.tle }}</p>
        <div class="imglist">
          <img
            v-for="(it, index) in bbzl.imgs"
            :key="index"
            src="../assets/imgs/d.jpg"
          />
        </div>
        <p class="desc">我们每周三会评选出前三名宝贝的作品以及作品展示哦</p>
      </div>
    </blo>
    <!-- 米兰画廊 -->
    <blo title="米兰画廊" clr="#7c40d0">
      <div class="mmhl">
        <p class="tle">
          <van-icon class="star" name="star-o" color="#fff" />让美定格在这一刻
        </p>
        <div class="imgs">
          <img
            v-for="(img, index) in mmhl_imgs"
            :key="index"
            src="../assets/imgs/a.jpg"
            alt=""
          />
        </div>
      </div>
    </blo>
    <!-- 关于我们 -->
    <blo title="关于我们" clr="#7e2b00" style="border-bottom: none">
      <div class="gywm">
        <img
          class="cover"
          style="height: 150px"
          src="../assets/imgs/b.jpg"
          alt=""
        />
        <div class="intro">
          <img src="../assets/imgs/icon_hl.png" alt="" class="head" />
          <div class="desc">
            <p class="school">米兰书画教育中心</p>
            <p class="name">校长 易老师</p>
          </div>
        </div>
        <div class="detail textoverflow_2">
          米兰书画成立于2015年，目前已经设立安阳校区，郑州伊河路校区等多家分校，因为专注，所以专业，给我一份信任，还您一。。。
        </div>
      </div>
    </blo>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onBeforeMount,
  onMounted,
  reactive,
} from "@vue/runtime-core";
import { Options, Vue } from "vue-class-component";
import Swiper from "@component/Swiper.vue";
import Navs from "@component/NavList.vue";
import Blo from "@component/mBox.vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getParamFromUrl } from "../util/util";
import {getToken,setToken} from '../util/token'
import { getCode, getUserInfo,getIndex} from "../api";
import glo_cfg from "../config";
interface swipeItem {
  img: string;
  desc: string;
}
export default defineComponent({
  components: {
    Swiper,
    Navs,
    Blo,
  },
  setup() {
    //轮播图数据
    const store = useStore();
    const router = useRouter();
    let tokenReady=false;//是否已有token
    onBeforeMount(async () => {
      let code = getParamFromUrl("code");
      let ml_token =getToken();
      if (code) {
        //如果地址栏有code参数，证明是从微信认证跳转过来的
        await getUserInfo(code).then((res) => {
          setToken(res.data);
          tokenReady=true;
        });
      } else if (!ml_token || ml_token=='-1') {
        // 如果没有设置过token或者值为-1（token失效），则需要重新去验证
        getCode(glo_cfg.baseWeb).then((res) => {
          location.href = res.data;
        });
      }
      if(tokenReady){
        getIndex().then(res=>{
          alert('index成功');
          alert(JSON.stringify(res));
        })
      }
    });
    onMounted(()=>{
     
    })
    let swipe_items: Array<swipeItem> = reactive([
      {
        img: require("../assets/imgs/a.jpg"),
        desc: "123",
      },
      {
        img: require("../assets/imgs/b.jpg"),
        desc: "456",
      },
      {
        img: require("../assets/imgs/c.jpg"),
        desc: "789",
      },
    ]);
    // 新鲜事
    let xxs = reactive({
      tle: "米兰书画老师郑州研学中米兰书画老师郑州研学中",
      desc: "米兰书画老师郑州研学中米兰书画老师郑州研学中米兰书画老师郑州研学中",
      coverimg: "",
    });
    //宝贝专栏
    let bbzl = reactive({
      tle: "优秀的宝贝和优秀的作品",
      imgs: ["1", "2", "3"],
    });
    // 米兰画廊
    let mmhl_imgs = reactive([1, 2, 3, 4, 5, 6]);
    onMounted(() => {
      store.commit("changeFooter", true);
    });

    return {
      swipe_items,
      xxs,
      bbzl,
      mmhl_imgs,
    };
  },
});
</script>
<style scoped lang="scss">
@mixin tle_sty() {
  font-size: 16PX;
  color: #111;
  font-weight: 600;
}

.homewrap {
  padding-bottom: 160px;
}
.blo:last-child {
  border-bottom: none;
}
.navbar {
  background: #19aeff;
  margin-bottom: -1px;
}
.nav {
  margin-top: 5px;
}
.xxs {
  display: flex;
  justify-content: space-between;
  .lf {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 5px;
    overflow: hidden;
    .tle {
      @include tle_sty();
    }
    .desc {
      color: #666;
    }
  }
  .rgt {
    width: 40%;
    img {
      width: 100%;
      height: auto;
    }
  }
}
.bbzl {
  .tle {
    @include tle_sty();
  }
  .imglist {
    width: 100%;
    // height:200px;
    display: flex;
    margin: 15px 0;
    justify-content: space-between;
    img {
      display: block;
      width: 32%;
    }
  }
  .desc {
    color: #666;
  }
}
.mmhl {
  width: 100%;
  .tle {
    @include tle_sty();
    .star {
      background: #7e47ce;
      display: inline-block;
      padding: 5px;
      border-radius: 50%;
      margin-right: 8px;
      vertical-align: baseline;
    }
  }
  .imgs {
    margin: 15px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    img {
      display: block;
      width: 32%;
      margin-bottom: 15px;
    }
  }
}
.gywm {
  width: 100%;
  .cover {
    width: 100%;
  }
  .intro {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
    margin-top: -50px;
    .head {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin-right: 20px;
    }
    .desc {
      display: flex;
      height: 80px;
      flex-direction: column;
      justify-content: space-between;
      .school {
        font-size: 16PX;
        color: #fff;
        font-weight: 600;
      }
      .name {
        font-size: 14PX;
        color: #111;
      }
    }
  }
  .detail {
    margin-top: 20px;
    font-size: 12PX;
    color: #999;
  }
}
</style>